import React, { useState, useEffect } from 'react'
import { Breadcrumb, Button, Table } from "antd"
import { SearchOutlined, CloudUploadOutlined } from '@ant-design/icons';
import * as echarts from 'echarts';
import style from './index.module.scss'



export default function DelayStatus() {
    const [echarts1, setMain] = useState('')
    const columns = [
        {
            title: '逾期金额的总和',
            dataIndex: 'goods_name',
        },
        {
            title: '逾期总用户数',
            dataIndex: 'look_counts',
        },
        {
            title: '逾期总次数',
            dataIndex: 'look_persons',
        },
        {
            title: '逾期已还金额总和',
            dataIndex: 'loan_numbers',
        },
        {
            title: '逾期剩余金额的总和',
            dataIndex: 'loan_lv',
        },
    ];

    const dataSource = [
        {
            key: '1',
            goods_name:'1900000000',
            look_counts:'159人',
            look_persons:'1828次',
            loan_numbers:'1234567780',
            loan_lv:'4466879800',
        },
       
    ];
    const option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '贷款形式',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: '7天内' },
                    { value: 735, name: '15天内' },
                    { value: 580, name: '45天内' },
                    { value: 484, name: '30天内' },
                ]
            }
        ]
    };
    useEffect(() => {
        var node = document.getElementById('echarts1')
        setMain(node)
    }, [])
    // 基于准备好的dom，初始化echarts实例
    if (echarts1 !== "") {
        var myChart = echarts.init(echarts1);
        myChart.resize({ height: '400px' })
        myChart.setOption(option);
    }

    return (
        <div>
            <Breadcrumb style={{ margin: '16px 0', display: "flex", justifyContent: "start" }}>
                <Breadcrumb.Item>首页</Breadcrumb.Item>
                <Breadcrumb.Item>数据分析</Breadcrumb.Item>
                <Breadcrumb.Item>逾期状况</Breadcrumb.Item>
            </Breadcrumb>
            <div className={style.pre_title}>
                <p>逾期占比</p>
                <Button className='button'><CloudUploadOutlined className="icon" />导出</Button>
            </div>
            <div id="echarts1"></div>
            <div className={style.pre_title}>
                <p>用户逾期总览</p>
                <Button className='button'><CloudUploadOutlined className="icon" />导出</Button>
            </div>
            <Table dataSource={dataSource} columns={columns} pagination={false} />
        </div>
    )
}
